<template>
    <div class="main">
        <div class="header">
            <a href="/">
                <img src="src/assets/img/logo3.png" alt="">
            </a>
            <h1>用户登录</h1>
        </div>
        <form id="login_form" v-bind:class="shake" @submit.prevent="login">
            
            <div class="alert alert-danger" role="alert" v-model="errData" v-show="errData">{{ errData }}</div>
            <div class="form-group">
                <label for="">邮箱</label>
                <input type="email" v-model="formData.email" class="form-control"  name="email" placeholder="Email" v-focus required>
            </div>
            <div class="form-group">
                <label for="">密码</label>
                <a class="pull-right" href="#">忘记密码？</a>
                <input type="password" v-model="formData.password" class="form-control" name="password" placeholder="Password" required>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox">记住我
                </label>
            </div>
            
            <button type="submit" @click="qingkong" class="btn btn-success btn-block">登录</button>
        </form>
        <div class="message">
            <p>没有账号? <router-link to="/register">点击创建</router-link>.</p>
        </div>
    </div>
</template>
<script>
import axios from 'axios'
import ladash from 'ladash'
export default {
    data() {
        return {
            formData: {
                email: '',
                password: ''
            },
            errData: '',
            shake: ''
        }
    },
    methods: {
        login: _.debounce(async function() {
            try {
                const ret = await axios.post('/api/session', this.formData)
                this.errData = ''
                this.$router.push('/')

            } catch (err) {
                const { status } = err.response
                switch (status) {
                    case 404:
                        this.errData = '用户名或者账户错误，请重试'
                        this.formData.password = ''
                        this.shake = 'tada animated'
                        break
                    default:
                        break
                }
            }
        }, 500),

        qingkong () {
            this.shake = ''
        }

    }
}
</script>
<style>
</style>